<template>
  <div :class="{'patient-card':true,'no-process':patientInfo.state ==='0','no-process-alreadyRegister':patientInfo.doit==='0' && patientInfo.state ==='1'}">
    <div class="basic-info">
      {{ `${patientInfo.name}（${patientInfo.sex==='1'?'男':'女'} ${patientInfo.age}岁）` }}
    </div>
    <div class="patient-tag">
      <div class="patient-payment">
        <el-tag v-if="patientInfo.yblx==='自费'" size="mini" type="success" effect="dark">{{patientInfo.yblx}}</el-tag>
        <el-tag v-if="patientInfo.yblx==='异地医保'" size="mini" type="success" effect="dark">{{patientInfo.yblx}}</el-tag>
        <el-tag v-if="patientInfo.yblx==='国家医保'" size="mini" type="success" effect="dark">{{patientInfo.yblx}}</el-tag>
        <el-tag v-else-if="patientInfo.yblx==='苏州医保'" size="mini" type="warning" effect="dark">{{patientInfo.yblx}}</el-tag>
      </div>
      <div class="patient-state">
        <el-tag v-if="patientInfo.ryzt==='待床'" size="mini">待床</el-tag>
        <el-tag v-else-if="patientInfo.ryzt==='出院'" size="mini" type="success">出院</el-tag>
        <el-tag v-else-if="patientInfo.ryzt==='预约'" size="mini" color="#e6fffb" style="color:#28c8c7;border-color:#87e8de;">预约</el-tag>
        <el-tag v-else-if="patientInfo.ryzt==='取消'" size="mini" type="info">取消</el-tag>
        <el-tag v-else-if="patientInfo.ryzt==='入院'" size="mini" type="warning">入院</el-tag>
        <el-tag v-else size="mini" type="danger">作废</el-tag>
      </div>
      <div class="patient-registerState">
        <el-tag v-if="patientInfo.state==='0'" size="mini" style="background:#f3715c;border:0;color:#ffffff">未登记</el-tag>
        <el-tag v-else-if="patientInfo.state==='1'" size="mini" style="background:#00ae9d;border:0;color:#ffffff">已登记</el-tag>
      </div>
    </div>
    <div class="patient-msg">
      <div class="msg-row-one">
        <div>医生姓名：{{ patientInfo.emplName }}</div>
        <div>所在科室：{{ patientInfo.deptName }}</div>
      </div>
      <div class="msg-row-two">
        <div>检查进度：{{ patientInfo.doit + '/' + patientInfo.total }}</div>
      </div>
      <div class="msg-row-three">
        <div>预约时间：{{ patientInfo.yysj }}</div>
      </div>
      <div v-if="patientInfo.ryrq!=null" class="msg-row-three">
        <div>入院时间：{{ patientInfo.ryrq }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    patientInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.patient-card{
  cursor: pointer;
  height: 160px;
  width: 250px;
  background-color: #fff;
  // background-color: rgba(255, 161, 161,.2);
  border: 1px solid rgb(230,230,230);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  .basic-info{
    text-align: center;
  }
  .patient-tag{
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .patient-msg{
    color: rgb(109, 109, 109);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .patient-msg .msg-row-one div{
    font-size: 12px;
    padding: 6px 0;
  }
  .patient-msg .msg-row-two div{
    font-size: 12px;
    padding: 6px 0;
  }
  .patient-msg .msg-row-three div{
    font-size: 12px;
    padding: 6px 0;
  }
}
.patient-card:hover{
  border: 1px solid #2B80FF;
  transition: .4s;
}
.patient-card.no-process{
  background-color: #cbc547;
}
.patient-card.no-process-alreadyRegister{
  background-color: #f5b77c;
}
</style>
